<template>
  <div class="menu-index-container">
    <!-- 用户列表头部 -->
    <div class="list-header">
      <div class="header-icon">
        <Icon icon="ep:user" />
      </div>
      <h4 class="header-title">员工列表</h4>
    </div>

    <!-- 用户列表 -->
    <div class="user-list">
      <div class="chat-view" ref="containerRef">
        <div
          class="chat-item"
          v-for="(item, key) in list"
          :key="key"
          :class="{ 'chat-item-active': key === changeUser }"
          @click="selectItem(item, key)"
        >
          <div class="item-content">
            <div class="chat-avatar">
              <canvas
                :key="item.id"
                :ref="(el) => getDivDom(el, item)"
                :style="{ background: ColorMap[key % 4] }"
                class="avatar-canvas"
              ></canvas>
            </div>
            <div class="chat-info">
              <div class="user-name">
                {{ item.nickname || item.name || '未知用户' }}
              </div>
              <div class="user-status">
                <Icon icon="ep:circle-check" class="status-icon" />
                <span>活跃用户</span>
              </div>
            </div>
          </div>
          <div class="item-arrow">
            <Icon icon="ep:arrow-right" />
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <Pagination
        layout="total,prev, pager,next"
        :total="totals"
        :page="params.pageNo"
        :limit="params.pageSize"
        :pager-count="1"
        @pagination="listPage"
        class="custom-pagination"
      />
    </div>
  </div>
</template>

<script setup>
import { formatDate } from '@/utils/formatTime'
import * as dataStatisticApi from '@/api/wecom/dataStatistics/index'

defineOptions({ name: 'MenuIndex' })

const props = defineProps({
  menuIndex: String,
  list: Array,
  params: Object,
  totals: Number
})

const { params, totals } = toRefs(props)
const { menuIndex, list } = toRefs(props)

const changeUser = ref('')
const ColorMap = ref([
  'linear-gradient(135deg, #84CAB0 0%, #6AB7A8 100%)',
  'linear-gradient(135deg, #BC9EDD 0%, #A78BFA 100%)',
  'linear-gradient(135deg, #7DB3D9 0%, #60A5FA 100%)',
  'linear-gradient(135deg, #8CA3CD 0%, #6366F1 100%)'
])
const divDomList = ref(new Map())
const cardList = ref([])
const emit = defineEmits(['setCardList'])

const listPage = (val) => {
  emit('getList', val)
}

const getDivDom = (el, item) => {
  if (el) {
    divDomList.value.set(item.id, el)
  }
}

watch(
  () => divDomList.value,
  (value) => {
    list.value.forEach((item) => {
      const canvas = value.get(item.id)
      if (canvas) {
        let companyName
        if (menuIndex.value == 1) {
          companyName = item.nickname ? item.nickname.slice(0, 2).toUpperCase() : ''
        } else {
          companyName = item.name ? item.name.slice(0, 2).toUpperCase() : ''
        }
        let positLeft = 50
        const ctx = canvas.getContext('2d')
        ctx.scale(1, 0.5)
        ctx.font = '100px sans-serif'
        ctx.fillStyle = '#fff'
        ctx.fillText(companyName, positLeft, 180)
      }
    })
  },
  { immediate: true, deep: true }
)

// 点击详情
const selectItem = (item, key) => {
  changeUser.value = key
  if (menuIndex.value == 1) {
    getWecontactStat(item.weUserId)
  } else {
    getChatStat(item.weUserId)
  }
}

// 客户联系统计列表
const getWecontactStat = async (value) => {
  if (value) {
    const data = await dataStatisticApi.wecontactStat({ weUserId: value })
    emit('setCardList', data)
  } else {
    emit('setCardList', [])
  }
}

// 群统计
const getChatStat = async (value) => {
  if (value) {
    const data = await dataStatisticApi.weChatStat({ weUserId: value })
    emit('setCardList', data)
  } else {
    emit('setCardList', [])
  }
}

watch(
  () => menuIndex.value,
  (val) => {
    changeUser.value = 0
    let item
    if (list.value.length == 0) {
      item = { weUserId: null }
    } else {
      item = list.value[0]
    }
    if (val == 1) {
      getWecontactStat(item.weUserId)
    } else {
      getChatStat(item.weUserId)
    }
  },
  { immediate: true, deep: true }
)
</script>

<style scoped lang="scss">
// 主题色变量
$primary-color: #0052cc;
$primary-light: rgba(0, 82, 204, 0.1);
$primary-border: rgba(0, 82, 204, 0.3);
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
$text-placeholder: #c0c4cc;
$border-color: #dcdfe6;
$border-light: #e4e7ed;
$bg-color: #f5f7fa;
$shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$shadow-base:
  0 2px 4px rgba(0, 0, 0, 0.12),
  0 0 6px rgba(0, 0, 0, 0.04);
$border-radius: 12px;
$border-radius-small: 8px;

.menu-index-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: $border-radius-small;
  overflow: hidden;
}

/* 列表头部 */
.list-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
  border-bottom: 1px solid $border-light;
  flex-shrink: 0;

  @media (max-width: 768px) {
    padding: 12px 16px;
  }
}

.header-icon {
  width: 32px;
  height: 32px;
  background: $primary-color;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  flex-shrink: 0;

  @media (max-width: 768px) {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
}

.header-title {
  font-size: 16px;
  font-weight: 600;
  color: $text-primary;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 14px;
  }
}

/* 用户列表 */
.user-list {
  flex: 1;
  overflow: hidden;
}

.chat-view {
  height: 100%;
  overflow-y: auto;
  padding: 8px;

  @media (max-width: 768px) {
    padding: 4px;
  }

  /* 滚动条美化 */
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 82, 204, 0.3);
    border-radius: 3px;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(0, 82, 204, 0.5);
    }
  }
}

.chat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: white;
  border: 1px solid $border-light;
  border-radius: $border-radius-small;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

  @media (max-width: 768px) {
    padding: 10px 12px;
    margin-bottom: 6px;
  }

  &:hover {
    border-color: $primary-border;
    box-shadow: $shadow-base;
    transform: translateY(-1px);
  }

  &.chat-item-active {
    background: $primary-light;
    border-color: $primary-color;
    box-shadow: 0 2px 8px rgba(0, 82, 204, 0.2);
  }
}

.item-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;

  @media (max-width: 768px) {
    gap: 10px;
  }
}

.chat-avatar {
  position: relative;
  flex-shrink: 0;
}

.avatar-canvas {
  width: 44px;
  height: 44px;
  border-radius: $border-radius-small;
  box-shadow: $shadow-base;
  transition: all 0.3s ease;

  @media (max-width: 768px) {
    width: 40px;
    height: 40px;
  }

  .chat-item:hover & {
    transform: scale(1.05);
  }
}

.chat-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: $text-primary;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  @media (max-width: 768px) {
    font-size: 13px;
  }
}

.user-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: $text-secondary;

  @media (max-width: 768px) {
    font-size: 11px;
  }
}

.status-icon {
  color: $success-color;
  font-size: 12px;
}

.item-arrow {
  color: $text-placeholder;
  font-size: 14px;
  flex-shrink: 0;
  transition: all 0.3s ease;

  .chat-item:hover & {
    color: $primary-color;
    transform: translateX(2px);
  }

  .chat-item-active & {
    color: $primary-color;
  }
}

/* 分页容器 */
.pagination-container {
  padding: 16px 20px;
  border-top: 1px solid $border-light;
  background: #fafbff;
  flex-shrink: 0;

  @media (max-width: 768px) {
    padding: 12px 16px;
  }
}

.custom-pagination {
  :deep(.el-pagination) {
    justify-content: center;

    .el-pager li {
      border-radius: 6px;
      margin: 0 2px;
      transition: all 0.3s ease;
      font-size: 12px;
      min-width: 28px;
      height: 28px;
      line-height: 26px;

      &:hover {
        background: $primary-light;
        color: $primary-color;
      }

      &.is-active {
        background: $primary-color;
        color: white;
        border-color: $primary-color;
      }
    }

    .btn-prev,
    .btn-next {
      border-radius: 6px;
      transition: all 0.3s ease;
      font-size: 12px;
      min-width: 28px;
      height: 28px;

      &:hover {
        background: $primary-light;
        color: $primary-color;
      }
    }

    .el-pagination__total {
      font-size: 12px;
      color: $text-secondary;
    }

    @media (max-width: 768px) {
      .el-pager li,
      .btn-prev,
      .btn-next {
        min-width: 24px;
        height: 24px;
        line-height: 22px;
        font-size: 11px;
      }

      .el-pagination__total {
        font-size: 11px;
      }
    }
  }
}

/* 响应式优化 */
@media (max-width: 480px) {
  .list-header {
    padding: 10px 12px;
  }

  .chat-view {
    padding: 2px;
  }

  .chat-item {
    padding: 8px 10px;
    margin-bottom: 4px;
  }

  .item-content {
    gap: 8px;
  }

  .avatar-canvas {
    width: 36px;
    height: 36px;
  }

  .user-name {
    font-size: 12px;
  }

  .user-status {
    font-size: 10px;
  }

  .pagination-container {
    padding: 8px 12px;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .menu-index-container {
    background: #374151;
  }

  .list-header {
    background: #4b5563;
    border-color: #6b7280;
  }

  .header-title {
    color: #f9fafb;
  }

  .chat-item {
    background: #374151;
    border-color: #4b5563;

    &:hover {
      background: #4b5563;
    }

    &.chat-item-active {
      background: rgba(96, 165, 250, 0.1);
      border-color: #60a5fa;
    }
  }

  .user-name {
    color: #f9fafb;
  }

  .user-status {
    color: #d1d5db;
  }

  .pagination-container {
    background: #4b5563;
    border-color: #6b7280;
  }
}
</style>
